<template>
	<div>
		<transition name="slide-right">
			<div v-if="dialog" class="search">
				<div class="content">
					<div class="header">
						<div class="icon-left" @click="hide"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
						<div class="mui-content-padded">
							<div class="mui-input-row mui-search">
								<input type="search" class="mui-input-clear" placeholder="请输入关键字" v-model="name">
							</div>
						</div>
						<div style="width: 40px;" @tap="search">搜索</div>
					</div>
					<div class="header-null"></div>
					<div class="mui-content mui-scroll-wrapper" :id="id.substring(1)" style="margin-top: 50px;">
						<div class="mui-scroll">
							<div class="list">
								<div class="item" v-for="(item, index) in list" @tap="items(item)">
									<div class="left">
										<img :src="item.img_path"/>
									</div>
									<div class="right">
										<div>#{{item.t_name}}#</div>
										<div>{{item.t_desc}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
	export default {
		props: {
			dialog: {
				type: Boolean,
				default: false
			},
			list: {
				type: [Array, Object],
				default: []
			},
			id: {
				type: String,
				default: ''
			},
			lastPage: {
				type: String,
				default: ''
			},
			page: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				name: ''
			}
		},
		methods: {
			hide() {
				this.$emit('hide')
			},
			items(item) {
				this.$emit('success', item)
				this.hide()
			},
			search() {
				this.$emit('search', this.name)
			},
			pullupRefresh() {
				this.$emit("pullupRefresh")
			}, 
			pulldownRefresh() {
				this.$emit("pulldownRefresh")
			}
		},
		watch: {
			dialog(val) {
				if(val) {
					this.$nextTick(function() {
						mui('.mui-input-row input').input();
						mui.init({
			                pullRefresh: {
			                    container: this.id,
			                    up: {//上拉加载
			                    	height: 40,
			                        auto:false,//可选,默认false.自动上拉加载一次
			                        contentrefresh: '正在加载...',
			                        contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			                        callback: this.pullupRefresh
			                    },
								down: {                        
									contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容                        
									contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容                        
									contentrefresh: "正在刷新…", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容                        
									auto: false,//可选,默认false.首次加载自动下拉刷新一次                        
									callback: this.pulldownRefresh                   
								}
			                }
			            });
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>

	.slide-right-leave-active {
	    opacity: 0;
	    -webkit-transform: translate(100%, 0);
	    transform: translate(100%, 0);
	    transition: 0.5s;
	}
	
	.slide-right-enter-active {
		transition: 0.5s;
	}
	
	.slide-right-enter {
	     opacity: 0;
	    -webkit-transform: translate(100%, 0);
	    transform: translate(100% 0);
	}

	.mui-search.mui-active:before {
		left: 15px;
		color: #000;
	}
	
	.mui-search:before {
		top: 75%
	}
	
	.mui-content-padded {
		color: #000;
		font-weight: normal;
	}
	
	.mui-content-padded input {
		padding-left: 35px;
	}
	
	.search {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 100;
		
		.content {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 101;
			background: #fff;
			
			input {
				margin-bottom: 0;
			}
			
			.list {
				height: 100%;
				overflow-y: scroll;
				width: 100%;
				background: #fff;
				
				.item {
					padding: 10px;
					padding-left: 0;
					border-bottom: 1px solid #ccc;
					display: flex;
					margin-left: 10px;
					
					.left {
						margin-right: 10px;
						
						img {
							height: 40px;
							width: 40px;
						}
					}
					
					.right {
						
						div:first-child {
							font-size: 14px;
						}
						
						div:last-child {
							font-size: 12px;
							color: #7B7B7B;
						}
					}
					
					&:last-child {
						border-bottom: 0;
					}
				}
			}
		}
	}
	
	
</style>